<template>
    <div class="delicacy">
        <div class="title-nav">
            <div class="position" @click="goPage('Home')">
                <van-icon name="arrow-left" />
            </div>
            <span>分类筛选</span>
        </div>
        <!-- 选择 -->
        <div class="selector">
            <van-dropdown-menu>
                <van-dropdown-item title="分类">
                    <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items" />

                </van-dropdown-item>
                <van-dropdown-item title="排序" v-model="value" :options="options" />
            </van-dropdown-menu>
        </div>
        <!-- 商铺列表 -->
        <div>
            <ul class="business-box">
                <li class="shop-li" v-for="(item, index) in shopsList" :key="index" @click="goDetail(item.id)">
                    <div class="shopImg-box">
                        <img :src="'//elm.cangdu.org/img/' + item.image_path" />
                    </div>
                    <div class="shop-text">
                        <div class="top">
                            <div class="left">
                                <span class="brand">品牌</span><span class="business-title">{{ item.name }}</span>
                            </div>
                            <div class="right">
                                <span v-for="(item1, index1) in item.supports" :key="index1">{{ item1.icon_name }}</span>
                            </div>
                        </div>
                        <div class="middle">
                            <div class="left">
                                <span>
                                    <van-rate v-model="item.rating" readonly allow-half size="12px" gutter="0px"
                                        color="#ff9a0d" void-color="#ccc" />
                                </span>
                                <span class="rate-value">4.7</span>
                                <span>月售{{ item.recent_order_num }}单</span>
                            </div>
                            <div class="right">
                                <span class="takeaway">{{ item.delivery_mode.text }}</span>
                                <span class="time">{{ item.supports[1].name }}</span>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>&yen;{{ item.float_minimum_order_amount }}起送</span>
                                <span class="line">/</span>
                                <span>配送费约&yen;{{ item.float_delivery_fee }}</span>
                            </div>
                            <div class="right">
                                <span>{{ item.distance }}</span>
                                <span class="line">/</span>
                                <span class="ps-time">{{ item.order_lead_time }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'

import axios from 'axios'

export default defineComponent({
    setup() {

        const active = ref(0);
        const value = ref(0);
        const switchBtn = ref(false);
        const options = [
            { text: '智能排序', value: 0 },
            { text: '距离最近', value: 1 },
            { text: '销量最高', value: 2 },
            { text: '起送价最低', value: 3 },
            { text: '配送速度最快', value: 4 },
            { text: '评分最高', value: 5 },
        ];

        // 筛选店铺
        const activeId: any = ref(1);
        const activeIndex: any = ref(0);
        const items: Array<any> = [
            {
                text: '全部',
                children: [
                    {
                        text: '全部',
                        id: 1,
                    }
                ],
            }
        ];
        let num: number = 1;

        //商铺列表
        let shopsList: any = ref<Array<any>>([]);

        let router: any = useRouter();
        //跳转页面
        let goPage: (name: string) => void = (name: string): void => {
            router.push({ name });
        }

        let getshopsList: () => void = (): void => {
            axios({
                method: "get",
                url: "https://elm.cangdu.org/shopping/restaurants",
                params: {
                    latitude: 31.22967,
                    longitude: 121.4762,
                },
            }).then((res: any): void => {
                // console.log("res ==> ", res);
                shopsList.value = res.data;
                // console.log("shopsList ==> ", shopsList.value);
            }).catch((err: any): void => {
                console.log("err ==> ", err);
            });
        };

        // 商家分类
        let getSearch: () => void = (): void => {
            axios({
                method: "get",
                url: 'https://elm.cangdu.org/shopping/v2/restaurant/category',
            }).then((res: any): void => {

                // console.log('res ==> ',res);
                for (let i = 0; i < res.data.length; i++) {
                    items.push({
                        text: res.data[i].name,
                        children: [],
                    })
                    for (let j = 0; j < res.data[i].sub_categories.length; j++) {
                        num++;
                        items[i + 1].children.push({
                            text: res.data[i].sub_categories[j].name,
                            id: num,
                            val_id: res.data[i].sub_categories[j].id
                        })
                    }
                }
                // console.log('items==>',items);


            }).catch((err: any): void => {

                console.log('err ==> ', err);

            });
        }


        let goDetail: (id: number) => void = (id: number): void => {
            router.push({
                name: "Detail",
                query: {
                id: id,
                },
            });
        };

        // 钩子函数
        onMounted(() => {
            getSearch();
            getshopsList();
        })

        return {
            // ref数据
            value,
            options,
            active,
            switchBtn,
            items,
            activeId,
            activeIndex,
            shopsList,

            // 方法
            goPage,
            goDetail
        };
    }
})
</script>

<style lang="scss" scoped>
.selector{
    width: 100%;
    height: 50px;
    position: fixed;
    top: 40px;
    left: 0;
    background-color: #fff;
    z-index: 9;
}
.title-nav {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 40px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    background-color: #3190E8;
    z-index: 10;

    .position {
        width: 40px;
        height: 40px;
        display: inline-block;
        color: #fff;
        position: absolute;
        top: 0;
        left: 10px;
    }
}

.business-box {
    margin-top: 90px;
    .shop-li {
        display: flex;
        margin-left: 10px;
        height: 107px;
        align-items: center;
        border-bottom: 1px solid #ccc;

        .line {
            margin-left: 3px;
            margin-right: 3px;
        }

        .shopImg-box {
            width: 73px;
            height: 73px;

            img {
                width: 64px;
                height: 64px;
            }
        }

        .shop-text {
            width: 284px;
            height: 73px;

            // background-color: green;
            .top {
                display: flex;
                justify-content: space-between;

                .brand {
                    background-color: #ffd930;
                }

                .business-title {
                    font-size: 14px;
                    margin-left: 5px;
                }

                .right {
                    span {
                        border: 0.025rem solid #f1f1f1;
                        margin-right: 1px;
                    }
                }
            }

            .middle {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;

                .rate-value {
                    margin-left: 5px;
                    margin-right: 5px;
                    font-size: 13px;
                    color: #ff6000;
                }

                .takeaway {
                    background-color: #3190e8;
                    color: #ffffff;
                    border: 0.025rem solid #3190e8;
                    margin-right: 2px;
                }

                .time {
                    color: #3190e8;
                    border: 0.025rem solid #3190e8;
                }
            }

            .bottom {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;

                .ps-time {
                    color: #3190e8;
                }
            }
        }
    }
}</style>